<template>
  <div class="wrapper">
    <div class="selection">
      <!-- <span>课程选择</span> -->
      <div
        class="con-selection"
        :class="item.flag?'active':''"
        @click="PostItem(item.id)"
        v-for="(item,index) in name1"
        :key="index"
      >
        <img :src="item.img" alt />
        <span>{{item.name}}</span>
        <p>
          <span>￥{{item.price}}</span>
        </p>
      </div>
      </div>
      <!-- 订单列表 -->
      <div class="order_lie">
        <div class="order">
          <p>订单列表</p>
          <ul>
            <li v-for="(item,index) in list" :key="index">{{item.name}}</li>
            <li>{{item.price}}</li>
          </ul>
          <!-- <ul>
            <li>中老年 室内设计 基础班</li>
            <li>￥198:00</li>
          </ul> -->
          <ul>
            <li>合计</li>
            <li>￥498:00</li>
          </ul>
        </div>
        <p></p>
      </div>
    
    <!-- <div class="exportitem">
      <img :src="proveimg" class="proveimg" v-if="isprove" @click="upprovefile(1)" />
      <div class="imgdiv" @click="upprovefile(1)" v-else>
        <img src="@/assets/introduce/list3.jpg" />
        <label>请上传工作证或职称证明</label>
      </div>
      <input type="file" style="display: none" ref="prove_file" @change="changeprovefile" />
    </div>
    <div class="exportitem1">
      <img :src="frontimg" class="frontimg" v-if="isfront" @click="upprovefile(2)" />
      <div class="imgdiv" @click="upidfront(2)" v-else>
        <img src="@/assets/introduce/bmxinxi.jpg" />
        <label>请上传身份证正面照</label>
        <input type="file" style="display: none" ref="id_front" @change="changeprovefile" />
      </div>
      <img :src="backimg" class="backimg" v-if="isback" @click="upprovefile(3)" />
      <div class="imgdiv" @click="upidback(3)" v-else>
        <img src="@/assets/introduce/bmxinxi.jpg" />
        <label>请上传身份证反面</label>
        <input type="file" style="display: none" ref="id_back" @change="changeprovefile" />
      </div> -->
    <!-- </div> -->
    <div class="information">
      <!-- 上传电话号 -->
      <div class="phone">
        <div class="shuru">
          联系电话
          <input type="text" placeholder="请输入你的手机号" v-model="mobile" />
        </div>
        <div class="zaici">
          再次输入
          <input type="text" placeholder="请再次输入你的手机号" v-model="mobile" />
        </div>
      </div>
      <div class="submit">
        <button @click="authentication">原价报名</button>
        <!-- <button @click="but">原价报名(￥2599)</button> -->
        <button>20万矿金的款报名实名￥590</button>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import {Taglist,Pub,List,Qinun,Certificate,Barschol} from "../../request/api";
export default {
  name: "",
  data() {
    return {
      list:[
        {
          name:'中老年钢琴版 高级版',
          price:'￥300:00'
        },
        {
          name:'中老年 室内设计 基础班',
          price:'￥198:00'
        },
      ],
      name1:[],
      qwe:[],
       activeCla: 0,
      checkBox: [],
      clickAll: false,
      proveimg: "" /*缩略图*/,
      frontimg: "",
      backimg: "",
      token: "",
      // frontkey: "",
      // majorid: "1",
      // isprove: false,
      // isfront: false,
      // isback: false,
      // List: [],
      // activeName: 0,
      // name: [],
      // tids:"",
      // // tidss: "",
      // tablist: [],
      // contentlist: [],
      // loading: false,
      // finished: false,
      // page: 1, //请求第几页
      // pageSize: 10, //每页请求的数量
      // total: 0, //总共的数据条数
      // userid: "111",
      // qwe:[],
      // asd:[],
      // cids:"",
      // activeCla:0,
      // checkBox:[],
      // clickAll:false,
      // type: 1,
      // provekey: "",
      // backkey: "",
      // mobile: "",
      // code: "",
      // activeClass: -1,
      // checked: true,
      // currentRate: 0,
      // Certif:[],
      // photo:"",
      // just_img:"",
      back_img:""
    };
  },
  props: {},
  components: {},
  mounted() {
    // 获取token值
    Qinun().then(res => {
      console.log(res.data.data);
      this.int1 = res.data.data;
    });
    // 职业技能介绍
    // let obj = {
    //   uid: 3,
    //   type: 2
    // };
    // Taglist(obj).then(res => {
    //   console.log(res);
    // });
    // let Sch = {
    //   uid: 1,
    //   tel: 13111111111,
    //   healthy_status: 0,
    //   hids: 1,
    //   cids: 1,
    //   price: 100,
    //   discount_gold: 500,
    //   photo: this.photo,
    //   just_img: this.just_img,
    //   back_img: this.back_img
    // };
    // 职业技能老年大学报名接口
    Barschol(Sch).then(res => {
      console.log(res);
    });
    // 职业技能报名课程
    let ject = {
      uid:1,
      page:1
    };
    Lesson(ject).then(res=>{
      console.log(res)
      this.name1 = res.data.data
    })
  },
  methods: {
    // switchevent:function (type) {
    //     this.type=type;
    //     this.contentlist=[];
    //     this.page=1;
    // },
    // upprovefile: function(type) {
    //   this.$refs.prove_file.click();
    //   this.type = type;
    // },
    // upidfront: function(type) {
    //   this.$refs.id_front.click();
    //   this.type = type;
    // },
    // upidback: function(type) {
    //   this.$refs.id_back.click();
    //   this.type = type;
    // },
    // // 上传身份证验证
    // changeprovefile: function(e) {
    //   var that = this;
    //   const files = e.target.files;
    //   let filename = files[0].name1; //只有一个文件
    //   if (filename.lastIndexOf(".") <= 0) {
    //     return alert("Please add a valid image!"); //判断图片是否有效
    //   }
    //   const fileReader = new FileReader(); //内置方法new FileReader()   读取文件
    //   fileReader.addEventListener("load", () => {
    //     if (that.type == 1) {
    //       that.proveimg = fileReader.result;
    //     }
    //     if (that.type == 2) {
    //       that.frontimg = fileReader.result;
    //     }
    //     if (that.type == 3) {
    //       that.backimg = fileReader.result;
    //     }
    //   });
    //   fileReader.readAsDataURL(files[0]);
    //   if (that.type == 1) {
    //     that.proveimg = files[0];
    //   }
    //   if (that.type == 2) {
    //     that.frontimg = files[0];
    //   }
    //   if (that.type == 3) {
    //     that.backimg = files[0];
    //   }
      
    //   const axiosInstance = axios.create({ withCredentials: false });
    //   let data = new FormData();
    //   data.append("token", that.int1); //七牛需要的token，叫后台给，是七牛账号密码等组成的hash
    //   data.append("file", files[0]);
    //   axiosInstance({
    //     method: "POST",
    //     url: "https://upload-z1.qiniup.com", //上传地址
    //     data: data,
    //     timeout: 30000 //超时时间，因为图片上传有可能需要很
    //   })
    //     .then(data => {
    //       // console.log(files[0]);
    //       if (that.type == 1) {
    //         that.photo = data.data.key;
    //         console.log(that.phone);
    //         that.isprove = true;
    //       }
    //       if (that.type == 2) {
    //         that.just_img = data.data.key;
    //         console.log(that.just_img);
    //         that.isfront = true;
    //       }
    //       if (that.type == 3) {
    //         that.back_img = data.data.key;
    //         console.log(that.back_img);
    //         that.isback = true;
    //       }
    //     })
    //     .catch(function(err) {});
    // },
    // authentication() {
    //   console.log(this.photo)
    //   console.log(123)
    //   var tids = this.asd.join(",");
    //   var cids = this.qwe.join(",");
    //   console.log(cids)
    //   // console.log(12);
    //   // return false;
    //   axios.post("/api/branchschool/signup", {
    //       uid: "1",
    //       tel: "13111111111",
    //       healthy_status: 0,
    //       hids: tids,
    //       cids: cids,
    //       price: "500",
    //       discount_gold: 500,
    //       photo: "http://oss.dayinyun.com/" + this.photo ,
    //       just_img: "http://oss.dayinyun.com/" + this.just_img,
    //       back_img: "http://oss.dayinyun.com/" + this.back_img,
    //     })
    //     .then(function(res) {
    //       console.log(res);
    //     })
    //     .catch(function(error) {
    //       // 上传失败
    //       console.log(222);
    //     });
    // },
    // PostItem(ject){
    //   console.log(ject)
    //   var titledata = this.name1;
    //   var titlearray = this.qwe;
    //   for(var i = 0; i<titledata.length; i++){
    //     if(titledata[i].id == ject){
    //       titledata[i].flag = true;
    //       console.log(titledata[i].id);
    //       titlearray.push(titledata[i].id)
    //       console.log(titlearray);
    //     }
    //   }
    //   this.qwe = titlearray;
    //   console.log(this.qwe);
    //   this.name = titledata;

    // },
  },
  watch: {}
};
</script>

<style  scoped>
.order {
  /* margin-top: 28px; */
  /* text-align: center; */
  /* width: 692px; */
  height: 282px;
  border-bottom: 1px solid #666666;
  margin-left: 14px;
  padding: 10px;
}
.order p {
  font-size: 40px;
}
.order ul {
  /* width: 750px; */
  color: #fff;
  font-size: 34px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.order ul li {
  font-size: 34px;
  margin-top: 5px;
  /* color: #999999; */
}
.selection {
  border: 1px solid #fff;
  height: 770px;
  /* border: 1px solid #fff;/ */
  display: flex;
  flex-wrap: wrap;
  color: #fff;
}

.selection span {
  font-size: 35px;
  height: 300px;
}
.con-selection {
  border: 1px solid #fff;
  width: 492px;
  /* text-align: center; */
  /* border: 1px solid #fff; */
}
.selection .con-selection {
  width: 350px;
  height: 360px;
  /* border: 1px solid #fff; */
  padding: 10px;
}
.selection .con-selection > img {
  width: 370px;
  height: 226px;
}
.selection .con-selection > span {
  font-size: 35px;
}
.selection .con-selection > p {
  font-size: 35px;
}
html .wrapper {
  background: #000;
}
.exportitem {
  width: 90%;
  margin: 0 auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 30px;
}
.exportitem .imgdiv,
.proveimg {
  display: block;
  width: 80%;
  height: 403px;
  background: rgba(35, 35, 35, 1);
  opacity: 1;
  border-radius: 10px;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 30px;
}
.exportitem .imgdiv img {
  width: 308px;
  height: 180px;
  display: block;
  margin: 0 auto;
  margin-top: 90px;
}
.exportitem .imgdiv label {
  display: block;
  font-size: 28px;
  font-family: PingFang-SC-Medium;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
  text-align: center;
  margin-top: 30px;
}
.exportitem1 {
  width: 90%;
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  margin-top: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 30px;
}
.exportitem1 .imgdiv,
.frontimg,
.backimg {
  display: block;
  width: 48%;
  height: 230px;
  background: rgba(35, 35, 35, 1);
  opacity: 1;
  border-radius: 10px;
  margin-right: 4%;
}
.exportitem1 .imgdiv img,
.exportitem1 .imgdiv label {
  display: block;
}
.exportitem1 .imgdiv img {
  width: 160px;
  height: 110px;
  margin: 0 auto;
  margin-top: 30px;
}
.exportitem1 .imgdiv label {
  font-size: 28px;
  font-family: PingFang-SC-Medium;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
  text-align: center;
  margin-top: 30px;
}
.information {
  height: 600px;
  background: #000;
}
.information .card .inpu2 {
  border: 1px solid #fff;
  width: 200px;
  height: 222px;
}
.information .card .inpu1 {
  border: 1px solid red;
  width: 200px;
  height: 222px;
  /* opacity: 0; */
  /* filter: alpha(opacity=0); */
  font-size: 100px;
  position: absolute;
  top: 0;
  right: 0;
}
.information .card {
  /* overflow: hidden; */
  position: relative;
  width: 750px;
  height: 289px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-left: 8px;
  margin-top: 7px;

  /* border-bottom: 1px solid #eee; */
}
.information .card > img {
  width: 335px;
  height: 222px;
  /* margin: 0 0 0 5px; */
}
.phone {
  color: #fff;
  width: 100%;
  height: 235px;
}
.phone .shuru {
  /* width: 100%; */
  margin-left: 18px;
  height: 113px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
  margin-top: 5px;
  font-size: 35px;
}
.phone .shuru > input {
  border: none;
}
.phone .zaici {
  font-size: 35px;
  /* width: 100%; */
  margin-left: 18px;
  height: 113px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
  margin-top: 5px;
}
.phone .zaici > input {
  border: none;
  /* height: 40px; */
}
/* 底部提交按钮 */
.submit {
  /* width: 720px; */
  height: 100px;
  border-bottom: 1px solid #666666;
}
.submit button:nth-of-type(1) {
  background: #ffa300;
  width: 240px;
  height: 96px;
  font-size: 32px;
  line-height: 96px;
  border: none;
  text-align: center;
  color: #fff;
}
.submit button:nth-of-type(2) {
  background: #fe0000;
  width: 510px;
  color: #fff;
  height: 96px;
  font-size: 32px;
  line-height: 96px;
  text-align: center;
  padding: 20px;
  /* margin-top: 10px; */
  height: 800px;
  /* border: 1px solid #fff; */
}
.health {
  padding: 20px;
  /* margin-top: 10px; */
  height: 800px;
  /* border: 1px solid #fff; */
}
.health span {
  margin: 0 0 0 20px;
  font-size: 35px;
}
.health ul {
  /* margin-top: 10px; */
  /* width: 610px; */
  height: 700px;
  display: flex;
  flex-wrap: wrap;
}
.health ul li {
  font-size: 26px;
  margin: 20px 0 0 20px;
  width: 180px;
  height: 53px;
  line-height: 53px;
  /* border: 1px solid #000; */
  background: #232323;
  text-align: center;
  border-radius: 15px;
  /* margin: 5px 0 0 10px; */
}
.dibu_nav {
  height: 200px;
}
.dibu_nav p {
  font-size: 35px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 690px;
  margin-left: 23px;
}
.dibu_nav a {
  font-size: 27px;
  color: #fff;
}
.Interest {
  padding: 20px;
  height: 200px;
}
.Interest span {
  margin: 0 0 0 20px;
  font-size: 35px;
  color: #fff;
}
.Interest ul {
  /* height: 700px; */
  display: flex;
  flex-wrap: wrap;
}
.Interest ul li {
  border-bottom: 1px solid #666666;
  color: #fff;
  font-size: 26px;
  margin: 20px 0 0 20px;
  width: 110px;
  height: 53px;
  line-height: 53px;
  /* border: 1px solid #000; */
  background: #232323;
  text-align: center;
  border-radius: 15px;
  /* margin: 5px 0 0 10px; */
}
.submit {
  /* width: 720px; */
  height: 100px;
  border-bottom: 1px solid #666666;
}
.submit button:nth-of-type(1) {
  background: #ffa300;
  width: 240px;
  height: 96px;
  font-size: 32px;
  line-height: 96px;
  border: none;
  text-align: center;
  color: #fff;
}
.submit button:nth-of-type(2) {
  background: #fe0000;
  width: 510px;
  color: #fff;
  height: 96px;
  font-size: 32px;
  line-height: 96px;
  text-align: center;
  border: none;
}
</style>